<template>
	<view class="main">
		<uv-form labelPosition="left" :model="model" labelWidth='80' :rules="rules" ref="form">
			<uv-form-item label="关系" required prop="guanxi" borderBottom @click="showpicker">
				<uv-input v-model="model.guanxi" disabled disabledColor="#ffffff" placeholder="请选择关系" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="姓名" required prop="name" borderBottom>
				<uv-input v-model="model.name" border="none" placeholder="请输入姓名">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="身份证" required prop="idCard" borderBottom>
				<uv-input v-model="model.idCard" border="none" placeholder="请输入身份证">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="地址" required prop="address" borderBottom>
				<uv-input v-model="model.address" border="none" placeholder="请输入地址">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="手机号" required prop="phone" borderBottom>
				<uv-input v-model="model.phone" border="none" placeholder="请输入手机号">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="验证码" required prop="code" borderBottom>
				<view style="display: flex;">
					<uv-input v-model="model.code" border="none" placeholder="请输入验证码" />
					<view>
						<uv-code seconds="60" ref="code" @change="codeChange"></uv-code>
						<uv-button type="primary" customStyle="background:#2c9b94;borderColor:#2c9b94;"
							@tap="getCode">{{tips}}</uv-button>
					</view>
				</view>
			</uv-form-item>
			<uv-form-item label="默认就诊人" prop="isBind" borderBottom>
				<view style="display: flex;justify-content: flex-end;">
					<uv-switch v-model="model.isBind" activeColor="#2c9b94" inactiveColor="#ccc"></uv-switch>
				</view>
			</uv-form-item>
			<uv-button type="primary" text="保存" customStyle="margin-top: 50px;background:#2c9b94;borderColor:#2c9b94;"
				@click="submit"></uv-button>
		</uv-form>

		<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirmpicker"></uv-picker>

		<uv-modal ref="modal" title="绑卡须知" :closeOnClickOverlay="false" @confirm="confirm">
			<view class="slot-content">
				<view> 1、已建档患者，在添加就诊人时录入的手机号须为建档时预留的手机号，未预留手机号的请到院留存。 </view>
				<view> 2、我院就诊实行实名制，请使用就诊人姓名、身份证号绑定，姓名须与身份证上的一致。 </view>
				<view> 3、请仔细检查姓名、身份证号是否输入正确，以免影响您的就诊。 </view>
				<view> 4、绑定其他就诊人须经其本人同意，未征得其本人同意的不允许绑定5、我们将使用您的相关个人信息进行绑卡操作。 </view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	import {
		code,
		idCard,
		mobile
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';

	export default {
		data() {
			return {
				tips: '',
				model: {
					guanxi: '',
					idCard: '',
					name: '',
					address: '',
					isBind: false,
					phone: '',
					code: '',
				},
				columns: [
					[{
							label: '本人',
							id: 1
						},
						{
							label: '夫妻',
							id: 2
						},
						{
							label: '父母',
							id: 3
						},
						{
							label: '子女',
							id: 4
						},
					]
				],
				rules: {
					'guanxi': {
						required: true,
						type: 'string',
						message: '请选择关系',
						trigger: ['blur', 'change']
					},
					'idCard': [{
							required: true,
							message: '请输入身份证',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$uv.test.idCard(value);
							},
							message: '身份证号码格式错误',
							trigger: ['blur']
						},
					],
					'name': {
						required: true,
						type: 'string',
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'address': {
						required: true,
						type: 'string',
						message: '请输入地址',
						trigger: ['blur', 'change']
					},
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$uv.test.mobile(value);
							},
							message: '手机号格式错误',
							trigger: ['blur']
						},
					],
					'code': {
						required: true,
						type: 'string',
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onShow() {
			this.$refs.modal.open();
		},
		methods: {
			getCode() {
				if (this.$refs.code.canGetCode) {
					uni.$uv.toast('验证码已发送');
				} else {
					uni.$uv.toast('倒计时结束后再发送');
				}
			},
			confirm() {
				this.$refs.modal.close();
			},
			showpicker() {
				this.$refs.picker.open();
				this.hideKeyboard();
			},
			confirmpicker(e) {
				this.model.guanxi = e.value[0].label;
				this.$refs.form.validateField('guanxi', err => {})
			},
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			codeChange(text) {
				this.tips = text;
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		padding: 0 40rpx;
	}
</style>